<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<div id="box">		
			<ul>
				<!-- 遍历数组 -->
				<li v-for="(item,index) in list">
					{{item}}----{{index}}
				</li>
			</ul>
			<ul>
				<!-- in遍历对象 -->
				<li v-for="(val,key,index) in obj">
					{{val}}-----{{key}}----{{index}}
				</li>
				<!-- of 遍历对象 -->
				<li v-for="(val,key,index) of obj">
					{{val}}-----{{key}}----{{index}}
				</li>
			</ul>
			
			<ul>
				<li v-for="n in 10">
					{{n}}
				</li>
				<li v-for="n of 10">
					{{n}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm= new Vue({
				el:"#box",
				data:{
					list:["aa","bb","cc"],
					obj:{
						name:"tom",
						age:18,
						phone:"110"
					}
				}
				
			})
		</script>
	</body>
	
</html>
